Instructions and Scripting for the “Differences Game”

       Game and instructions by R. Tolman, Osoyoos, B.C. Canada
    
        Note: Choice of  Clip Art pictures and sounds depends on resources available.

 
     A reasonable knowledge of HyperCard will help in making this game. 

Figure 1: The Title Page. (The Color Text option is shown)

In this fun to make HyperCard game, the student will learn about the following: 
      
   Buttons  • Text fields  • Popup fields  • Tool Palette (Pencil tool - Marquee 
   tool  - Eraser - Paint Bucket - Fat Bits) • Pattern Palette  • Importing of 
   Clip Art pictures using ClickArt®ClipOut  • Cut  • Paste  •  Artistic    
   layout skills • Finder  • Scripting  • Installing stack resources using 
  ResCopy  • Visual Effects • Cloning new buttons and fields  • Shortcuts for 
   accessing and writing scripts • Layering buttons and fields.
  
Students will also learn and use the following HyperCard shortcuts:
New Card (N)
Copy (C)
Paste (V) Background (B) Undo (Z)

Enrichment Scripts: Sound - Color Text - Stack Protection    

Part 1 - Instructions to make the title page: (1st card of stack)

Directions To Make a New Stack:

• Go to the menu bar, select File, choose New Stack.
  A window will appear. Fig. 2.  

• Name your New Stack - “Differences Game” - enter your name

• Check the “Open stack in a new window” box. 

Note: "Open stack in new window" keeps the current stack open when a new stack is created. This is a good choice if you will be switching back and forth between stacks but it requires more memory.

Figure 2: Making a new card.

Adding a background design to the stack: 

Once you have created a new stack, it is nice to make a background design. The design used in this stack (see Figure 1) is a narrow grey border. Because it was made in the background, it will be visible on all other cards in this stack. To make this background design:

• Go to the background (B) and, using the Square tool from the Tool palette,  
  draw a simple rectangular design. Fill the thin, outer frame with a pattern 
  from the Patterns palette using the paint bucket. This background will be   
  visible on all of the cards that follow. Again, look at  the background design 
  used in Figure 1. Remember, once the rectangular design has been made 
  in the background, go back to the foreground (B) and continue making the 
  game graphics, Level of Difficulty box, buttons, etc.

Selecting a graphic (picture) for the title page using ClickArt®Clipout to open and select clip art:
(Variations may occur due to different methods of selecting and copying clip art)

• Click on the Apple Menu (the colored apple) at the top, left of the menu
   bar. Drag down to ClickArt®Clipout. Method of selecting clip art will vary.

•  A window will appear on the screen. See Figure 3. Click on Open .
   Choose Desktop. Select the Hard Drive and double-click on it. Select 
   the Clip Art folder and open it. Choose Cartoons and pick a favorite for  
   your Title Page. Choose the Marquee or Lasso tool from the Tool palette, 
   outline the chosen cartoon and copy it (C).

•  To return to the title page, go to the Finder (the last icon at the right-hand 
   of  the menu bar) and drag down to HyperCard. This will return you back to 
   HyperCard.

•  Paste (V) two copies of the graphic onto your Title Page. Position one 
   on each side of the card. Select the right-hand graphic with the 
    marquee tool, go to Paint in the menu bar, choose Flip Horizontal. 
   This will give you a mirror image of the graphic. Arrange the two pictures
   on the Title Page so there is one on each side of the card. See Fig. 1 and 8.
   Change some parts of the right hand graphic as illustrated. See Fig. 1.

Figure  3: Selecting and copying clip art using the application ClickArt® Clipout.

Useful information to aid in stack construction:

1) When closing a script window, simply push the “Enter” key. All    
     scripting and changes to scripting will be saved automatically without 
     having to go through “Save Changes to Script” and “Yes”.

2) If the menu bar is hidden when the stack opens, push  Spacebar, 
     both at the same time. The menu bar will reappear.

3) To go to the 1st card of any stack use the command (1).

4) To go to the last card of any stack use the command ( 4).

Making the boxes for the "Level of Difficulty" and "Quit Game" buttons:

• Choose theSquare tool from the Tool palette, draw a simple rectangular design as shown in Fig. 4. Fill the thin  frame with a pattern from the Patterns palette using the paint bucket.

Making the “Level of Difficulty” and "Quit Game" buttons:
(Done in the foreground of Title Page)

• The one "Quit Game" and three small "Level of Difficulty" buttons are placed 
  on the title page. See Figure 1 and 4.

The "Level of Difficulty" buttons will be for use in the future when you make the game cards. Make these buttons and script them as shown in Fig. 5. Don’t worry about supplying their card ID numbers until later, after the game cards have been made. 

The "Quit Game" button should be made and scripted at this time. Fig. 4.
Type the script shown in Fig. 5 into the "Quit Game" button script window.

Figure 4:  “ Level of Difficulty ”  box showing four active buttons.

• To make a button, select the Button tool from the Tool palette. Hold down  
  the Command key () as you click and drag a button to the size required. 
  The selected button may be resized, if needed, by clicking on a corner of the 
  active button, then dragging it to the required size. 

• Once one "Level of Difficulty" button is made, double-click on it and set the 
  button attributes to:

  - Style: Radio Button
  - Family: 1
  - Select  Auto Hilite but not Show Name.

Let's clone (make an exact copy) two more "Level of Difficulty" buttons. To do this:

1) Select  the completed button to make it active. (choose the button tool and 
     click on the chosen button)

2) Hold down the Option key as you click on the button and drag a new 
     button.

The three "Level of Difficulty" buttons, when clicked, will allow you to travel to each of the game cards in the stack. Place them as shown in Fig. 4.

Trivia: A windoid is a tiny window. 

Make one "Quit Game" button and set the button attributes to:

  - Style: Transparent
  - Select  Auto Hilite and Show Name.
  - Name: Quit Game

Locate this button as shown in Fig. 4.

Before we make the game cards, let’s write a script, or two: (This first script will allow you to travel to the game card once the card id number is entered.)

• To get to the script  window for each “Level of Difficulty” button, hold down 
   both the Command and Option keys at the same time while clicking on 
   a “Level of Difficulty” button. A Script window will open. See Figure 5.

Figure 5: “Level of Difficulty”  button script.   

•  Type the script shown above for each of the three small “Level of Difficulty” 
    buttons. Leave the card id number blank for right now.

   Later on in these instructions, you will be told how to make the three game 
   cards. Once these cards have been made, come back to these “Level of 
   Difficulty” button scripts you are now typing and fill in their correct card ID 
   numbers.  

How to find a card id number:

1) Go to the card you want the number for.

2) Go to the Menu bar, and choose “Objects”.

3) Drag down to “Card Information”. You will find the number of the card 
     when the card information window opens. Type it in where the blank line 
     appears in the above script. 

Figure 6: The "Quit Game" button script.

A stack script can do special things for your game: 

This stack is scripted with two types of script. They are entered into the stack script window. The script window can be reached from any card in the stack. ( Option S to reach this window) See Figure 7.

1) The “on openStack” script.

This will cause the menu bar to be hidden and the user level to be set to 
Level 1, which is browsing. A user can only look at and move through (browse) stacks when the user level is 1.

2) The “on closeStack” script .

This will cause the sound “bye” to be played upon closing of the stack.

Figure 7: The stack scripts.

Note: Scripting found in the stacks preceded by the word play and then the name of the sound in quotations (e.g. “bye”), is optional. It may be left out. See Figure 6 & 7.

More useful quick commands:

- To bring down the tool palette: Option Tab

- To bring down the Patterns Palette: Tab (Not while in Browse, Button or 
  Field tools)

- To undo any action: Z (must be done immediately after making an error)

- To go to the Home card in HyperCard: H

Part 2 - Instructions to make the Game Cards: 
                   (This applies to cards #2,3 & 4 in the stack)

• Once the Title Page is completed to this stage, it is time to make the first of 
   the three game cards.

• With the title page visible, make a new card by pushing both Command 
  and N at  the same time (N). A new card will appear. This card takes it’s 
  place second in line, right after the Title Page. Notice that it has the same 
  background graphics as the Title page.

Figure 8: One of the three “Game” cards.

• Once a card for the first of your game cards has been made, it is time to  
  place the graphics. One picture goes on each side of the card, as in 
  Figure 8 above.
• Selecting a graphic for the game card: (All work is done in the foreground.)
• The instructions for this operation have already been fully explained in the 
   section entitled “Selecting a graphic (picture) for the title page”. See Fig. 3.

Important: Do not flip the right hand graphic to a mirror image this time. Have both graphics face the same direction. This will make it easier for the player to locate the “Differences”.

Drawing the “Score Box” on the Title Page:
 (All work is to be done in the foreground of the card.)

•  To draw the Score Box, select the Rectangle tool from the Tool palette. 
   Draw the two thin-line rectangles as shown in Figure 9a below.

Figure 9:

                

• Select Text in the Tool box and double-click on it. A Text Properties window 
   will open. See Figure 10 below. Select the following attributes:

   Style - Outline

Size - 20
   Font - Geneva         Align - Center

                
Figure 10:  The “Text Properties” window settings.

• Type the word “ Score ”, using the above attribute settings. Center it in  
   the smaller of the two boxes as shown in Figure 9a. Select the Paint Bucket 
   from the Tool palette and fill the space in the smaller box with black. Be 
   sure to fill the white center of the letter “O” also. This will give the desired 
   white type. See Figure 9b.

Making the Score Box field: (All work to be done in the foreground.)

• Select the Field tool from the Tool palette. Make a small field and place it in  
   the center of the Score Box as shown in Figure 9c. Double-click on the 
   active field to open the Field information window. Name the field “plus”.

• With the Field information window still open, select Text Style. A new 
  window will open. See Figure 11. This is the Text Properties window. 
  
• Set the field attributes as follows: 

   Font - Geneva        Style - leave all unchecked

   Size - 20                  Align - Center

         
Figure 11: Setting the attributes for the field,“Score”.

• Now we come to the part of the instructions where we will be making the 
  small buttons which add and subtract from the score. These buttons are 
  quite small (mostly less than one centimeter square) and are placed in 
  locations on the right hand graphic of each game card only. Some 
  of these will be placed on areas of the graphic which has been changed, 
  others will be placed on areas which have not been changed. More 
  information will be given about these later.

• The easiest way to make a number of the same kind of buttons (or fields) is 
   to clone or copy them. To do this:

1)  Make one button, script it and set it’s attributes. ie. transparent, radio, auto 
     hilite, etc.

2) Choose the Button tool from the Tool palette. Hold down the Option key, 
     click on the button and drag in a downwards motion. The button will be 
     cloned.  Rename the cloned buttons and make changes to the script as 
     needed. Repeat as necessary.

Making the “Add 1 to Score” buttons:

• Scattered about on the game card are buttons that, when clicked, will add to
   the score. Once these buttons have been pushed, they also become 
   hidden. Now  multiple points cannot be scored by repeatedly pushing the 
   “Add 1 to Score” buttons. Hidden buttons will reappear when the reset 
   button is pushed. Instructions for making the “reset” button will come later.

• Carefully type the script. The scripts within the two rectangular boxes are an 
   optional “prompt” for the player as he or she plays the game. Place these 
   three lines on just one of the “Add 1 to Score”  buttons. The sound 
   “howsyourscore” will play only under the following two conditions:

1) The player must “just then” be scoring the second point, and...

2) The player must be pushing the “so scripted” button just as he scores the 
     second point. Remember, only one button is scripted as such.

Figure 12: Scripting the “Add 1 to Score” buttons. (Script enclosed within the rectangles is optional.)

• Set the button attributes to:

   Style - Transparent
   Family - None
   Do not check Show Name or Auto Hilite

Important: Be sure to name each of the buttons as they are made.
 
Hint: It is a really good idea to write the names of the buttons on a piece of paper and to use this as a reference when scripting. Be extra careful to spell the names correctly and to watch capitalization. 

Making the “Subtract 1 from Score” buttons:

• These buttons are scattered about on the game card graphic in random 
  locations. Their purpose is to subtract  from the score if a lazy player clicks 
  haphazardly on the game graphics in an attempt to score points unfairly. 

Note: These buttons do not disappear when clicked as the “Add 1 to Score” 
             buttons do.

• To make these buttons, follow the directions given for the “Add 1 to Score” 
   buttons. Do not name these buttons. Copy the script as shown in Figure 13.

Figure 13: Scripting the “Subtract 1 from Score” button.

Note: The name of the sound you choose will most likely be different from 
            the one shown in Figure 13. (“Snoopy”)

Making the Reset button:  

• The Reset button allows the player to reset the game.The script will cause 
   the “Add 1 to Score” buttons to be shown again.

• Make a reset button similar to the one shown in Figure 8. Place it on the 
  game card in a similar location. 

Scripting the Reset button:

• Go to the Reset button script window (Hold down  Option while clicking 
  on the button). Type in the script exactly as shown in Figure 14. The only 
  changes you may have will be the names of the buttons and the sounds you 
  have chosen.

More useful information to aid in construction of the stack:  

Hint: To reset the stack user level, type  M. A small windoid will open below  the bottom of the stack. Type set userLevel to 5 into this windoid, then push return. The stack will reset itself to Level 5, Scripting.

Figure 14: Resetting the game card buttons.

Making the buttons which take you from the game cards back to the Title Page:

Now that the "Level of Difficulty" buttons are functional, we have the problem of how to return from a game card back to the Title Page. A button with an arrow and message provides a logical solution. 

• On each of the game cards, make a "Transparent" style button. Place 
  each button in the lower left hand corner of each of the game cards.
  See Figure 8.

• Select the Button tool then double-click on your newly-made button. A 
  window will appear. Click Show Name and Auto Hilite. Name the 
  button "Back to Start".
        
 • Push the Icon... button and select the small Left Arrow icon as shown in 
   Figure 8. Close this window then click on LinkTo... . 

• A windoid will appear. Pushing (1) will return you to the the 1st card in the
  stack, the Title Page. Now push  the button, This Card. 

• You have now linked your button to the Title Page. Choose the Browse 
   button and and click on the Left Arrow button. It should return you to the 
  Title Page.